<template>
  <div class="app-container">
    <h2>{{ this.groupName }}</h2>
    <hr/>

    <el-card class="card-format">
      <div slot="header" class="card-title">
        设备组信息
      </div>

      <div>设备组名: {{ group.groupName }}</div>
      <div>创建时间: {{ group.createTime }}</div>
      <div>创建者:   {{ group.creator }}</div>

    </el-card>

    <el-card class='card-format'>
      <div slot="header" class="card-title">
        设备列表
        <i class='el-icon-circle-plus-outline'></i>
      </div>

      <el-collapse accordion>
        <el-collapse-item
          v-for="device in devices"
          :key="device.id"
          :name="device.name"
          :title="device.name"
        >
          设备类别: {{ device.type }}
          <div v-for="sensor in device.sensors" :key="sensor.id">
            {{ sensor.name }}: {{ sensor.value }}
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-card>

    <el-card class='card-format'>
      <div slot="header" class="card-title">
        位置信息
      </div>
      <div class="map-container">
        <Map
          :devices="devices"
          v-if="map_ready"
        ></Map>
      </div>
    </el-card>

    <el-card class="card-format">
      <div slot="header" class="card-title">
        历史数据图
      </div>

      <div id="chartLineBox" style="width: 90%;height: 40vh;">
      </div>

      <div style="float: right;">
        <el-button type="primary">
          导出
          <i class="el-icon-download"></i>
        </el-button>
      </div>
      
    </el-card>
  </div>
</template>

<script>
import Map from '@/components/Map'
import echarts from 'echarts'

import { getGroupLocation, getHistory } from '@/api/devices'

export default {
  name: 'GroupDetail',

  components: {
    Map
  },

  data() {
    return {
      devices: null,
      map_ready: false,
      temperatureHistory: null,
      phHistory: null,
      group: {
        groupName: '江北新区流域',
        deviceNum: 5,
        createTime: '2020-04-20',
        creator: 'hanniko'
      }
    }
  },

  computed: {
    options() {
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        
        legend: {
          data:['temperature', 'PH']
        },
        color: ['#8AE09F', '#FA6F53'],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2020-04-20', '2020-04-21', '2020-04-22', '2020-04-23',
            '2020-04-24', '2020-04-25', '2020-04-26'
          ],
          name: 'Date',
          nameTextStyle: {
            color: '#FA6F53',
            fontSize: 16,
            padding: [0, 0, 0, 20]
          },
          axisLine: {
            lineStyle: {
              color: '#FA6F53',
            }
          }
        },
        yAxis: {
          name: 'Value',
          nameTextStyle: {
            color: '#FA6F53',
            fontSize: 16,
            padding: [0, 0, 10, 0]
          },
          axisLine: {
            lineStyle: {
              color: '#FA6F53',
            }
          },
          type: 'value'
        },
        series: [
          {
            name: 'temperature',
            data: ['17.3', '19.6', '12.3', '17.6', '19.3', '21.3', '23.3'],
            type: 'line',
            lineStyle: {
              normal: {
                color: '#8AE09F',
              }
            },
          },
          {
            name: 'PH',
            data: ['7.3', '7.5', '7.6', '7.4', '7.4', '7.9', '7.5'],
            type: 'line',
            lineStyle: {
              normal: {
                color: '#FA6F53',
              }
            },
          }
        ]
      }
      return option
    }
  },
  
  mounted() {
    this.initChart()
  },

  created() {
    this.groupName = this.$route.query.groupName
    this.fetchLocation()
    this.fetchHistory()
  },

  methods: {
    fetchLocation() {
      getGroupLocation().then(response => {
        this.devices = response.data.items.devices
        this.map_ready = true
      })
    },
    fetchHistory() {
      getHistory('temperature').then(response => {
        this.temperatureHistory = response.data.items
      })
      getHistory('ph').then(response => {
        this.phHistory = response.data.items
      })
    },
    initChart() {
      this.chartLine = echarts.init(document.getElementById('chartLineBox'))
      this.chartLine.setOption(this.options)
    }
  }
}
</script>

<style lang="scss">
.map-container {
  width: 100%;
  height: 30vh;
}

.card-title {
  text-transform: capitalize;
  font-weight: bold;
}

.card-format {
  margin-bottom: 15px;
}
</style>
